<template>
  <div class="ComConfig-container" v-if="itemConfig.type">
    <a-tabs v-if="showTabs" v-model:activeKey="configKey" centered>
      <a-tab-pane :key="1" tab="组件配置"></a-tab-pane>
      <a-tab-pane :key="2" tab="表单配置"></a-tab-pane>
    </a-tabs>
    <a-form size="small" layout="vertical" v-show="configKey === 1">
      <a-form-item label="字段标识">
        <a-input v-model:value="itemConfig.defaultKey"></a-input>
      </a-form-item>
      <a-form-item label="标题">
        <a-input v-model:value="itemConfig.label"></a-input>
      </a-form-item>
      <a-form-item label="标题宽度(单位：px 或 %)">
        <a-input v-model:value="itemConfig.width"></a-input>
      </a-form-item>
      <a-form-item label="默认值" v-if="showDefaultValue">
        <a-input v-model:value="itemConfig.defaultValue"></a-input>
      </a-form-item>
      <a-form-item label="展示加减控件" v-if="itemConfig.type === 'number'">
        <a-switch v-model:checked="itemConfig.controls" />
      </a-form-item>
      <a-form-item
        label="展示格式"
        v-if="itemConfig.type == 'time' || itemConfig.type == 'date'"
      >
        <a-input v-model:value="itemConfig.format"></a-input>
      </a-form-item>
      <a-form-item
        label="取值格式"
        v-if="itemConfig.type == 'time' || itemConfig.type == 'date'"
      >
        <a-input v-model:value="itemConfig.valueFormat"></a-input>
      </a-form-item>
      <a-form-item label="是否禁用">
        <a-switch v-model:checked="itemConfig.disabled" />
      </a-form-item>
      <a-form-item label="是否必填">
        <a-switch v-model:checked="itemConfig.required" />
      </a-form-item>
      <a-form-item label="占位符">
        <a-input v-model:value="itemConfig.message"></a-input>
      </a-form-item>
      <a-form-item label="选项" v-if="showOptions">
        <div class="flex-row-ycenter mb-10">
          <div class="font-right" style="width: 150px">开启动态数据：</div>
          <div class="flex1">
            <a-switch v-model:checked="itemConfig.remote" />
          </div>
        </div>
        <div v-if="!itemConfig.remote">
          <a-checkbox-group
            v-model:value="itemConfig.defaultValue"
            v-if="itemConfig.type === 'checkbox'"
          >
            <Draggable
              class="form-list"
              item-key="key"
              :list="itemConfig.options"
              draggable=".form-item"
              v-bind="{
                group: 'options',
                ghostClass: 'ghost',
                animation: 200,
                sort: true
              }"
            >
              <template #item="{element, index}">
                <div class="flex-row-ycenter form-item mb-10">
                  <a-checkbox :value="element.value" style="margin: 0">
                    <a-input
                      v-model:value="element.label"
                      style="width: 150px"
                    ></a-input>
                  </a-checkbox>
                  <component
                    is="drag-outlined"
                    class="fs-20 c-666 mr-10"
                    style="cursor: move"
                  ></component>
                  <component
                    is="minus-circle-outlined"
                    class="fs-20 c-666"
                    style="cursor: pointer"
                    @click="deleteOption(index)"
                  ></component>
                </div>
              </template>
            </Draggable>
            <div class="flex-row-xy-center">
              <div
                class="commonBtn-primary"
                style="width: 50%"
                @click="addOption"
              >
                添加选项
              </div>
            </div>
          </a-checkbox-group>
          <a-radio-group
            v-model:value="itemConfig.defaultValue"
            v-if="itemConfig.type === 'radio' || itemConfig.type === 'select'"
          >
            <Draggable
              class="form-list"
              item-key="key"
              :list="itemConfig.options"
              draggable=".form-item"
              v-bind="{
                group: 'options',
                ghostClass: 'ghost',
                animation: 200,
                sort: true
              }"
            >
              <template #item="{element, index}">
                <div class="flex-row-ycenter form-item mb-10">
                  <a-radio :value="element.value" style="margin: 0">
                    <a-input
                      v-model:value="element.label"
                      style="width: 150px"
                    ></a-input>
                  </a-radio>
                  <component
                    is="drag-outlined"
                    class="fs-20 c-666 mr-10"
                    style="cursor: move"
                  ></component>
                  <component
                    is="minus-circle-outlined"
                    class="fs-20 c-666"
                    style="cursor: pointer"
                    @click="deleteOption(index)"
                  ></component>
                </div>
              </template>
            </Draggable>
            <div class="flex-row-xy-center">
              <div
                class="commonBtn-primary"
                style="width: 50%"
                @click="addOption"
              >
                添加选项
              </div>
            </div>
          </a-radio-group>
        </div>
        <div v-if="itemConfig.remote">
          <div class="flex-row-ycenter mb-10">
            <div class="font-right" style="width: 80px">接口地址：</div>
            <div class="flex1">
              <a-input v-model:value="itemConfig.api"></a-input>
            </div>
          </div>
          <div class="flex-row-ycenter mb-10">
            <div class="font-right" style="width: 80px">请求方法：</div>
            <div class="flex1">
              <a-input v-model:value="itemConfig.apiMethod"></a-input>
            </div>
          </div>
          <div class="flex-row-ycenter mb-10">
            <div class="font-right" style="width: 80px">lable字段：</div>
            <div class="flex1">
              <a-input v-model:value="itemConfig.apiLabelKey"></a-input>
            </div>
          </div>
          <div class="flex-row-ycenter">
            <div class="font-right" style="width: 80px">value字段：</div>
            <div class="flex1">
              <a-input v-model:value="itemConfig.apiValueKey"></a-input>
            </div>
          </div>
          <div class="commonBtn-warning mt-10" @click="getRemoteData">
            测试请求
          </div>
        </div>
      </a-form-item>
    </a-form>
    <a-form size="small" v-show="configKey === 2">
      <a-form-item label="表单布局">
        <a-radio-group v-model:value="formConfig.layout">
          <a-radio value="horizontal">横向</a-radio>
          <a-radio value="vertical">竖向</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="标题对齐方式">
        <a-radio-group v-model:value="formConfig.labelAlign">
          <a-radio value="left">左</a-radio>
          <a-radio value="right">右</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="组件大小">
        <a-radio-group v-model:value="formConfig.size">
          <a-radio value="large">大</a-radio>
          <a-radio value="default">默认</a-radio>
          <a-radio value="small">小</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, watch} from "vue";
import Draggable from "vuedraggable";
import {dynamicFormApi} from "@/api/common";
import useAppStore from "@/store/app";

const props = defineProps({
  itemConfig: {
    type: Object,
    default: {}
  },
  formConfig: {
    type: Object,
    default: {}
  },
  showTabs: {
    type: Boolean,
    default: true
  }
});

const configKey = ref<number>(1);

const showOptions = computed(() => {
  if (
    props.itemConfig.type === "checkbox" ||
    props.itemConfig.type === "radio" ||
    props.itemConfig.type === "select"
  ) {
    return true;
  } else {
    return false;
  }
});

const dataType = ref<number>(1);

watch(dataType, () => {
  if (dataType.value === 1) {
    props.itemConfig.remote = false;
  } else {
    props.itemConfig.remote = true;
  }
});

const getRemoteData = () => {
  if (
    props.itemConfig.remote &&
    props.itemConfig.api &&
    props.itemConfig.apiMethod &&
    props.itemConfig.apiLabelKey &&
    props.itemConfig.apiValueKey
  ) {
    useAppStore.loading = true;
    dynamicFormApi(props.itemConfig.api, props.itemConfig.apiMethod)
      .then((res) => {
        let arr = res.data.map((item: any) => {
          return {
            label: item[props.itemConfig.apiLabelKey],
            value: item[props.itemConfig.apiValueKey]
          };
        });
        props.itemConfig.optionsRemote = arr;
        useAppStore.loading = false;
      })
      .catch((err) => {
        useAppStore.loading = false;
      });
  } else {
    props.itemConfig.optionsRemote = [];
  }
};

const showDefaultValue = computed(() => {
  if (
    props.itemConfig.type === "input" ||
    props.itemConfig.type === "textarea"
  ) {
    return true;
  } else {
    return false;
  }
});

const deleteOption = (index) => {
  props.itemConfig.options.splice(index, 1);
};

const addOption = () => {
  props.itemConfig.options.push({
    label: "选项" + (props.itemConfig.options.length + 1),
    value: props.itemConfig.options.length + 1
  });
};
</script>

<style lang="less" scoped>
.ComConfig-container {
  //:deep(.ant-form) {
  //  .ant-form-item {
  //    margin: 0 0 10px 0 !important;
  //    .ant-form-item-label{
  //      padding: 0!important;
  //    }
  //  }
  //}
}
</style>
